<template>
  <div>
    <h5 class="title">[{{roleName}}]授权</h5>
    <el-row>
      <el-col :span="12" class="list">
        <el-tree ref="tree" :data="menus" :props="defaultProps"
                 :default-expand-all=true :highlight-current=true :expand-on-click-node=false
                 show-checkbox node-key="menuId"
                 @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="12" class="rlist">
        <el-checkbox-group v-model="checkedRights">
          <el-checkbox v-for="right in baseRights" :label="right.pkid">{{right.name}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
    <div class="footbar">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<style scoped>
  .el-tree{
    border: none;
  }
  .title {
    font-size: 20px;
    margin: 0px;
    padding: 20px 20px 0;
  }
  .list{
    margin-top: 20px;
    border-right: 1px solid #ababab;
  }
  .el-checkbox-group{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
  }
  .el-checkbox-group>label{
    margin-left: 20px;
    margin-top: 15px;
  }
  .footbar{
    text-align: right;
    padding: 10px 20% 10px 0;
  }
</style>
<script>
  import rmrApi from '../../../api/sys/rolemenurightApi'
  import rightApi from '../../../api/sys/rightApi'

  export default{
    data () {
      return {
        menus: null,
        baseMenus: null,
        baseRights: null,
        selectedMenu: null,
        defaultProps: {
          children: 'nodes',
          label: 'menuName'
        },
        checkedRights: null,
        isIndeterminate: false
      }
    },
    computed: {
      roleName: function () {
        return this.$route.params.name
      }
    },
    created () {
      rmrApi.getRoleMenuRight(this.$route.params.id).then(resp => {
        this.menus = resp.body.data
        let checkedRoleMenus = []
        this.menus.forEach(menu => {
          if (menu.pkid) {
            if (menu.nodes && menu.nodes.length > 0) {
              menu.nodes.forEach(subMenu => {
                subMenu.pkid && checkedRoleMenus.push(subMenu.menuId)
              })
            }
          }
        })
        this.$refs.tree.setCheckedKeys(checkedRoleMenus)
        return rightApi.all()
      }).then(resp => {
        this.baseRights = resp.body.data
      })
    },
    methods: {
      handleNodeClick (val) {
        this.updateRights()
        this.selectedMenu = val
        this.checkedRights = val.rights.map(right => right.pkid)
      },
      updateRights () {
        if (this.selectedMenu && this.checkedRights) {
          let formatChecked = this.checkedRights.map(id => ({'pkid': id}))
          this.$set(this.selectedMenu, 'rights', formatChecked)
        }
      },
      cancel () {
        this.$router.push('/role')
      },
      onSubmit () {
        this.updateRights()
        rmrApi.save(this.$refs.tree.getCheckedNodes(true), this.$route.params.id).then(resp => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        })
      }
    }
  }
</script>
